@import "ng-devui/styles-var/devui-var.scss";
.flow-node {
  position: relative;
  min-width: 150px;
  max-width: 200px;
  margin: 0 auto;
  .tags{
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translateY(calc(100% + 5px)) translate(-48%);
    white-space: nowrap;
    z-index: 1;
  }
  i{
    position: absolute;
    top: -2px;
    right: -2px;
    cursor: pointer;
    color: $devui-aide-text;
  }

  .flow-node-body{

      padding: 10px;
      border: 2px solid #eee;
      background-color: #fff;
      border-radius: $devui-border-radius-card;
      overflow: hidden;
      cursor: pointer;
      transition: all .3s;
      &:hover {
        box-shadow: $devui-shadow-length-base $devui-light-shadow;
      }
      .flow-node-body-item{
        display: flex;
        justify-content: center;
        font-size: $devui-font-size-card-title;
        color: #666;
        position: relative;
        .title{
          position: absolute;
          top: 0;
          left: 0px;
        }
      }

    }
  }

.me-1{
  margin: 0 3px;
}
:host ::ng-deep .devui-tag-item.tag-custom {
  background-color: $devui-brand;
  color: $devui-light-text;
  box-sizing: border-box;
}
:host ::ng-deep .devui-tag-item.tag-custom1 {
  background-color: $devui-success;
  color: $devui-light-text;
  box-sizing: border-box;
}
:host ::ng-deep .devui-tag-item.tag-custom2 {
  background-color: $devui-danger;
  color: $devui-light-text;
  box-sizing: border-box;
}
:host ::ng-deep .flow-node-body.active {
  border: 2px solid $devui-brand!important;
}
.flow-node-header {
  padding: 2px;
  background-color: $devui-list-item-hover-bg;
  color: $devui-text-weak;
  font-size: $devui-font-size-card-title;
  display: flex;
  align-items: left;
}
